<template>
  <div class="warehouses-page">
    <!-- 搜索区域 -->
    <el-card class="search-card">
      <el-form :inline="true" :model="searchForm" class="search-form">
        <el-form-item label="仓库名称">
          <el-input v-model="searchForm.name" placeholder="请输入仓库名称" clearable />
        </el-form-item>
        <el-form-item label="仓库类型">
          <el-select v-model="searchForm.type" placeholder="请选择" clearable>
            <el-option label="全部" value="" />
            <el-option label="主仓库" value="main" />
            <el-option label="分仓库" value="branch" />
            <el-option label="门店仓" value="store" />
            <el-option label="虚拟仓" value="virtual" />
            <el-option label="次品仓" value="defective" />
          </el-select>
        </el-form-item>
        <el-form-item label="仓库状态">
          <el-select v-model="searchForm.status" placeholder="请选择" clearable>
            <el-option label="全部" value="" />
            <el-option label="启用" value="active" />
            <el-option label="停用" value="inactive" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleSearch">
            <el-icon><Search /></el-icon>
            搜索
          </el-button>
          <el-button @click="handleReset">
            <el-icon><RefreshLeft /></el-icon>
            重置
          </el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <!-- 统计卡片 -->
    <div class="stats-cards">
      <el-card class="stat-card">
        <div class="stat-content">
          <div class="stat-icon" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%)">
            <el-icon><OfficeBuilding /></el-icon>
          </div>
          <div class="stat-info">
            <div class="stat-value">{{ statistics.total }}</div>
            <div class="stat-label">仓库总数</div>
          </div>
        </div>
      </el-card>
      <el-card class="stat-card">
        <div class="stat-content">
          <div class="stat-icon" style="background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%)">
            <el-icon><Check /></el-icon>
          </div>
          <div class="stat-info">
            <div class="stat-value">{{ statistics.active }}</div>
            <div class="stat-label">启用中</div>
          </div>
        </div>
      </el-card>
      <el-card class="stat-card">
        <div class="stat-content">
          <div class="stat-icon" style="background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%)">
            <el-icon><Box /></el-icon>
          </div>
          <div class="stat-info">
            <div class="stat-value">{{ statistics.totalProducts }}</div>
            <div class="stat-label">总商品数</div>
          </div>
        </div>
      </el-card>
      <el-card class="stat-card">
        <div class="stat-content">
          <div class="stat-icon" style="background: linear-gradient(135deg, #fa709a 0%, #fee140 100%)">
            <el-icon><DataAnalysis /></el-icon>
          </div>
          <div class="stat-info">
            <div class="stat-value">{{ (statistics.utilizationRate * 100).toFixed(1) }}%</div>
            <div class="stat-label">平均利用率</div>
          </div>
        </div>
      </el-card>
    </div>

    <!-- 数据表格 -->
    <el-card>
      <template #header>
        <div class="card-header">
          <span>仓库列表</span>
          <div>
            <el-button type="primary" @click="handleAdd">
              <el-icon><Plus /></el-icon>
              新增仓库
            </el-button>
            <ExportButton :data="tableData" filename="仓库列表" />
          </div>
        </div>
      </template>

      <el-table :data="tableData" stripe v-loading="loading">
        <el-table-column type="selection" width="55" />
        <el-table-column prop="code" label="仓库编码" width="120" />
        <el-table-column prop="name" label="仓库名称" min-width="150" />
        <el-table-column prop="type" label="仓库类型" width="100">
          <template #default="{ row }">
            <el-tag :type="getTypeTagType(row.type)">
              {{ getTypeLabel(row.type) }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="manager" label="负责人" width="100" />
        <el-table-column prop="phone" label="联系电话" width="120" />
        <el-table-column prop="address" label="仓库地址" min-width="200" show-overflow-tooltip />
        <el-table-column prop="capacity" label="容量(㎡)" width="100" align="right">
          <template #default="{ row }">
            {{ row.capacity.toLocaleString() }}
          </template>
        </el-table-column>
        <el-table-column prop="usedCapacity" label="已用(㎡)" width="100" align="right">
          <template #default="{ row }">
            {{ row.usedCapacity.toLocaleString() }}
          </template>
        </el-table-column>
        <el-table-column label="利用率" width="120">
          <template #default="{ row }">
            <el-progress 
              :percentage="(row.usedCapacity / row.capacity * 100)" 
              :color="getProgressColor(row.usedCapacity / row.capacity)" 
            />
          </template>
        </el-table-column>
        <el-table-column prop="productCount" label="商品数" width="100" align="right" />
        <el-table-column prop="status" label="状态" width="80">
          <template #default="{ row }">
            <el-tag :type="row.status === 'active' ? 'success' : 'info'">
              {{ row.status === 'active' ? '启用' : '停用' }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="200" fixed="right">
          <template #default="{ row }">
            <el-button link type="primary" @click="handleView(row)">
              <el-icon><View /></el-icon>
              查看
            </el-button>
            <el-button link type="primary" @click="handleEdit(row)">
              <el-icon><Edit /></el-icon>
              编辑
            </el-button>
            <el-button link type="danger" @click="handleDelete(row)">
              <el-icon><Delete /></el-icon>
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <el-pagination
        v-model:current-page="pagination.page"
        v-model:page-size="pagination.size"
        :total="pagination.total"
        :page-sizes="[10, 20, 50, 100]"
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        class="pagination"
      />
    </el-card>

    <!-- 新增/编辑对话框 -->
    <el-dialog
      v-model="dialogVisible"
      :title="dialogTitle"
      width="700px"
      @close="handleDialogClose"
    >
      <el-form
        ref="formRef"
        :model="form"
        :rules="rules"
        label-width="100px"
      >
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="仓库编码" prop="code">
              <el-input v-model="form.code" placeholder="请输入仓库编码" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="仓库名称" prop="name">
              <el-input v-model="form.name" placeholder="请输入仓库名称" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="仓库类型" prop="type">
              <el-select v-model="form.type" placeholder="请选择仓库类型" style="width: 100%">
                <el-option label="主仓库" value="main" />
                <el-option label="分仓库" value="branch" />
                <el-option label="门店仓" value="store" />
                <el-option label="虚拟仓" value="virtual" />
                <el-option label="次品仓" value="defective" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="仓库状态" prop="status">
              <el-radio-group v-model="form.status">
                <el-radio label="active">启用</el-radio>
                <el-radio label="inactive">停用</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="负责人" prop="manager">
              <el-input v-model="form.manager" placeholder="请输入负责人姓名" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="联系电话" prop="phone">
              <el-input v-model="form.phone" placeholder="请输入联系电话" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-form-item label="仓库地址" prop="address">
          <el-input v-model="form.address" placeholder="请输入仓库地址" />
        </el-form-item>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="仓库容量" prop="capacity">
              <el-input v-model.number="form.capacity" placeholder="请输入容量">
                <template #append>㎡</template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="预警阈值" prop="warningThreshold">
              <el-input v-model.number="form.warningThreshold" placeholder="利用率预警">
                <template #append>%</template>
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-form-item label="备注">
          <el-input
            v-model="form.remark"
            type="textarea"
            :rows="3"
            placeholder="请输入备注信息"
          />
        </el-form-item>
      </el-form>

      <template #footer>
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handleSubmit" :loading="submitting">
          确定
        </el-button>
      </template>
    </el-dialog>

    <!-- 查看详情对话框 -->
    <el-dialog
      v-model="viewDialogVisible"
      title="仓库详情"
      width="800px"
    >
      <div class="warehouse-detail" v-if="currentWarehouse">
        <el-descriptions :column="2" border>
          <el-descriptions-item label="仓库编码">{{ currentWarehouse.code }}</el-descriptions-item>
          <el-descriptions-item label="仓库名称">{{ currentWarehouse.name }}</el-descriptions-item>
          <el-descriptions-item label="仓库类型">
            <el-tag :type="getTypeTagType(currentWarehouse.type)">
              {{ getTypeLabel(currentWarehouse.type) }}
            </el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="仓库状态">
            <el-tag :type="currentWarehouse.status === 'active' ? 'success' : 'info'">
              {{ currentWarehouse.status === 'active' ? '启用' : '停用' }}
            </el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="负责人">{{ currentWarehouse.manager }}</el-descriptions-item>
          <el-descriptions-item label="联系电话">{{ currentWarehouse.phone }}</el-descriptions-item>
          <el-descriptions-item label="仓库地址" :span="2">{{ currentWarehouse.address }}</el-descriptions-item>
          <el-descriptions-item label="仓库容量">{{ currentWarehouse.capacity }} ㎡</el-descriptions-item>
          <el-descriptions-item label="已用容量">{{ currentWarehouse.usedCapacity }} ㎡</el-descriptions-item>
          <el-descriptions-item label="利用率">
            <el-progress 
              :percentage="(currentWarehouse.usedCapacity / currentWarehouse.capacity * 100)" 
              :color="getProgressColor(currentWarehouse.usedCapacity / currentWarehouse.capacity)" 
            />
          </el-descriptions-item>
          <el-descriptions-item label="商品数量">{{ currentWarehouse.productCount }} 个</el-descriptions-item>
          <el-descriptions-item label="预警阈值">{{ currentWarehouse.warningThreshold }}%</el-descriptions-item>
          <el-descriptions-item label="创建时间">{{ currentWarehouse.createTime }}</el-descriptions-item>
          <el-descriptions-item label="备注" :span="2">
            {{ currentWarehouse.remark || '-' }}
          </el-descriptions-item>
        </el-descriptions>

        <!-- 库存统计 -->
        <el-divider>库存统计</el-divider>
        <div class="stock-stats">
          <el-row :gutter="20">
            <el-col :span="8">
              <div class="stat-item">
                <div class="label">总库存数量</div>
                <div class="value">{{ currentWarehouse.stockQuantity?.toLocaleString() || 0 }}</div>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="stat-item">
                <div class="label">库存金额</div>
                <div class="value">¥{{ currentWarehouse.stockAmount?.toLocaleString() || 0 }}</div>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="stat-item">
                <div class="label">SKU数量</div>
                <div class="value">{{ currentWarehouse.productCount || 0 }}</div>
              </div>
            </el-col>
          </el-row>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive, computed, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import {
  Plus,
  Search,
  RefreshLeft,
  Edit,
  Delete,
  View,
  OfficeBuilding,
  Check,
  Box,
  DataAnalysis
} from '@element-plus/icons-vue'
import ExportButton from '@/components/common/ExportButton.vue'

// 搜索表单
const searchForm = reactive({
  name: '',
  type: '',
  status: ''
})

// 分页
const pagination = reactive({
  page: 1,
  size: 20,
  total: 0
})

// 统计数据
const statistics = reactive({
  total: 15,
  active: 12,
  totalProducts: 1580,
  utilizationRate: 0.68
})

// 表格数据
const tableData = ref([])
const loading = ref(false)

// 对话框
const dialogVisible = ref(false)
const viewDialogVisible = ref(false)
const dialogTitle = ref('新增仓库')
const submitting = ref(false)

// 表单
const formRef = ref(null)
const form = reactive({
  id: null,
  code: '',
  name: '',
  type: 'main',
  status: 'active',
  manager: '',
  phone: '',
  address: '',
  capacity: null,
  warningThreshold: 80,
  remark: ''
})

// 当前查看的仓库
const currentWarehouse = ref(null)

// 表单验证规则
const rules = {
  code: [
    { required: true, message: '请输入仓库编码', trigger: 'blur' }
  ],
  name: [
    { required: true, message: '请输入仓库名称', trigger: 'blur' }
  ],
  type: [
    { required: true, message: '请选择仓库类型', trigger: 'change' }
  ],
  manager: [
    { required: true, message: '请输入负责人', trigger: 'blur' }
  ],
  phone: [
    { required: true, message: '请输入联系电话', trigger: 'blur' },
    { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号码', trigger: 'blur' }
  ],
  address: [
    { required: true, message: '请输入仓库地址', trigger: 'blur' }
  ],
  capacity: [
    { required: true, message: '请输入仓库容量', trigger: 'blur' },
    { type: 'number', min: 1, message: '容量必须大于0', trigger: 'blur' }
  ],
  warningThreshold: [
    { type: 'number', min: 0, max: 100, message: '阈值范围0-100', trigger: 'blur' }
  ]
}

// 获取类型标签
const getTypeLabel = (type) => {
  const map = {
    main: '主仓库',
    branch: '分仓库',
    store: '门店仓',
    virtual: '虚拟仓',
    defective: '次品仓'
  }
  return map[type] || type
}

// 获取类型标签类型
const getTypeTagType = (type) => {
  const map = {
    main: 'danger',
    branch: 'warning',
    store: 'success',
    virtual: 'info',
    defective: ''
  }
  return map[type] || ''
}

// 获取进度条颜色
const getProgressColor = (rate) => {
  if (rate >= 0.9) return '#f56c6c'
  if (rate >= 0.8) return '#e6a23c'
  if (rate >= 0.6) return '#409eff'
  return '#67c23a'
}

// 加载数据
const loadData = () => {
  loading.value = true
  
  // 模拟数据
  setTimeout(() => {
    const mockData = [
      {
        id: 1,
        code: 'WH001',
        name: '北京总仓',
        type: 'main',
        manager: '张三',
        phone: '13800138001',
        address: '北京市朝阳区XX路XX号',
        capacity: 5000,
        usedCapacity: 3500,
        productCount: 850,
        status: 'active',
        warningThreshold: 80,
        createTime: '2024-01-15 10:30:00',
        stockQuantity: 125000,
        stockAmount: 6850000,
        remark: '主仓库，负责华北地区配送'
      },
      {
        id: 2,
        code: 'WH002',
        name: '上海分仓',
        type: 'branch',
        manager: '李四',
        phone: '13800138002',
        address: '上海市浦东新区XX路XX号',
        capacity: 3000,
        usedCapacity: 2100,
        productCount: 520,
        status: 'active',
        warningThreshold: 80,
        createTime: '2024-01-20 14:20:00',
        stockQuantity: 85000,
        stockAmount: 4200000,
        remark: '分仓，负责华东地区配送'
      },
      {
        id: 3,
        code: 'WH003',
        name: '广州分仓',
        type: 'branch',
        manager: '王五',
        phone: '13800138003',
        address: '广州市天河区XX路XX号',
        capacity: 2800,
        usedCapacity: 1800,
        productCount: 420,
        status: 'active',
        warningThreshold: 80,
        createTime: '2024-02-01 09:15:00',
        stockQuantity: 72000,
        stockAmount: 3650000,
        remark: '分仓，负责华南地区配送'
      },
      {
        id: 4,
        code: 'ST001',
        name: '朝阳门店仓',
        type: 'store',
        manager: '赵六',
        phone: '13800138004',
        address: '北京市朝阳区朝阳门XX号',
        capacity: 500,
        usedCapacity: 380,
        productCount: 180,
        status: 'active',
        warningThreshold: 85,
        createTime: '2024-02-10 11:00:00',
        stockQuantity: 15000,
        stockAmount: 750000,
        remark: '门店仓库'
      },
      {
        id: 5,
        code: 'ST002',
        name: '海淀门店仓',
        type: 'store',
        manager: '孙七',
        phone: '13800138005',
        address: '北京市海淀区中关村XX号',
        capacity: 450,
        usedCapacity: 320,
        productCount: 165,
        status: 'active',
        warningThreshold: 85,
        createTime: '2024-02-15 13:30:00',
        stockQuantity: 12500,
        stockAmount: 620000,
        remark: '门店仓库'
      },
      {
        id: 6,
        code: 'VT001',
        name: '虚拟仓库',
        type: 'virtual',
        manager: '周八',
        phone: '13800138006',
        address: '北京市朝阳区XX路XX号（虚拟）',
        capacity: 10000,
        usedCapacity: 0,
        productCount: 0,
        status: 'active',
        warningThreshold: 90,
        createTime: '2024-03-01 08:00:00',
        stockQuantity: 0,
        stockAmount: 0,
        remark: '虚拟仓库，用于预售商品'
      },
      {
        id: 7,
        code: 'DF001',
        name: '次品仓库',
        type: 'defective',
        manager: '吴九',
        phone: '13800138007',
        address: '北京市朝阳区XX路XX号B区',
        capacity: 800,
        usedCapacity: 150,
        productCount: 85,
        status: 'active',
        warningThreshold: 70,
        createTime: '2024-03-05 10:00:00',
        stockQuantity: 3500,
        stockAmount: 125000,
        remark: '存放次品、退货商品'
      },
      {
        id: 8,
        code: 'WH004',
        name: '成都分仓',
        type: 'branch',
        manager: '郑十',
        phone: '13800138008',
        address: '成都市高新区XX路XX号',
        capacity: 2500,
        usedCapacity: 1650,
        productCount: 380,
        status: 'active',
        warningThreshold: 80,
        createTime: '2024-03-10 15:20:00',
        stockQuantity: 62000,
        stockAmount: 3100000,
        remark: '分仓，负责西南地区配送'
      },
      {
        id: 9,
        code: 'WH005',
        name: '武汉分仓',
        type: 'branch',
        manager: '钱十一',
        phone: '13800138009',
        address: '武汉市江汉区XX路XX号',
        capacity: 2200,
        usedCapacity: 1450,
        productCount: 320,
        status: 'active',
        warningThreshold: 80,
        createTime: '2024-03-15 09:30:00',
        stockQuantity: 55000,
        stockAmount: 2750000,
        remark: '分仓，负责华中地区配送'
      },
      {
        id: 10,
        code: 'ST003',
        name: '西单门店仓',
        type: 'store',
        manager: '孙十二',
        phone: '13800138010',
        address: '北京市西城区西单XX号',
        capacity: 400,
        usedCapacity: 280,
        productCount: 150,
        status: 'active',
        warningThreshold: 85,
        createTime: '2024-03-20 11:45:00',
        stockQuantity: 11000,
        stockAmount: 550000,
        remark: '门店仓库'
      },
      {
        id: 11,
        code: 'WH006',
        name: '西安分仓',
        type: 'branch',
        manager: '李十三',
        phone: '13800138011',
        address: '西安市雁塔区XX路XX号',
        capacity: 2000,
        usedCapacity: 1200,
        productCount: 280,
        status: 'active',
        warningThreshold: 80,
        createTime: '2024-04-01 08:20:00',
        stockQuantity: 48000,
        stockAmount: 2400000,
        remark: '分仓，负责西北地区配送'
      },
      {
        id: 12,
        code: 'WH007',
        name: '南京分仓',
        type: 'branch',
        manager: '周十四',
        phone: '13800138012',
        address: '南京市建邺区XX路XX号',
        capacity: 1800,
        usedCapacity: 1100,
        productCount: 260,
        status: 'active',
        warningThreshold: 80,
        createTime: '2024-04-05 14:10:00',
        stockQuantity: 42000,
        stockAmount: 2100000,
        remark: '分仓，负责江苏地区配送'
      },
      {
        id: 13,
        code: 'ST004',
        name: '王府井门店仓',
        type: 'store',
        manager: '吴十五',
        phone: '13800138013',
        address: '北京市东城区王府井XX号',
        capacity: 420,
        usedCapacity: 300,
        productCount: 160,
        status: 'active',
        warningThreshold: 85,
        createTime: '2024-04-10 10:00:00',
        stockQuantity: 11500,
        stockAmount: 575000,
        remark: '门店仓库'
      },
      {
        id: 14,
        code: 'WH008',
        name: '沈阳分仓',
        type: 'branch',
        manager: '郑十六',
        phone: '13800138014',
        address: '沈阳市和平区XX路XX号',
        capacity: 1600,
        usedCapacity: 950,
        productCount: 220,
        status: 'active',
        warningThreshold: 80,
        createTime: '2024-04-15 13:25:00',
        stockQuantity: 38000,
        stockAmount: 1900000,
        remark: '分仓，负责东北地区配送'
      },
      {
        id: 15,
        code: 'WH009',
        name: '杭州备用仓',
        type: 'branch',
        manager: '王十七',
        phone: '13800138015',
        address: '杭州市滨江区XX路XX号',
        capacity: 1500,
        usedCapacity: 0,
        productCount: 0,
        status: 'inactive',
        warningThreshold: 80,
        createTime: '2024-04-20 09:00:00',
        stockQuantity: 0,
        stockAmount: 0,
        remark: '备用仓库，暂未启用'
      }
    ]

    // 应用搜索过滤
    let filteredData = mockData
    if (searchForm.name) {
      filteredData = filteredData.filter(item => 
        item.name.includes(searchForm.name) || item.code.includes(searchForm.name)
      )
    }
    if (searchForm.type) {
      filteredData = filteredData.filter(item => item.type === searchForm.type)
    }
    if (searchForm.status) {
      filteredData = filteredData.filter(item => item.status === searchForm.status)
    }

    pagination.total = filteredData.length
    tableData.value = filteredData.slice(
      (pagination.page - 1) * pagination.size,
      pagination.page * pagination.size
    )

    loading.value = false
  }, 300)
}

// 搜索
const handleSearch = () => {
  pagination.page = 1
  loadData()
}

// 重置
const handleReset = () => {
  searchForm.name = ''
  searchForm.type = ''
  searchForm.status = ''
  handleSearch()
}

// 分页
const handleSizeChange = () => {
  loadData()
}

const handleCurrentChange = () => {
  loadData()
}

// 新增
const handleAdd = () => {
  dialogTitle.value = '新增仓库'
  resetForm()
  dialogVisible.value = true
}

// 编辑
const handleEdit = (row) => {
  dialogTitle.value = '编辑仓库'
  Object.assign(form, row)
  dialogVisible.value = true
}

// 查看
const handleView = (row) => {
  currentWarehouse.value = row
  viewDialogVisible.value = true
}

// 删除
const handleDelete = (row) => {
  ElMessageBox.confirm(
    `确定要删除仓库"${row.name}"吗？`,
    '提示',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }
  ).then(() => {
    ElMessage.success('删除成功')
    loadData()
  }).catch(() => {})
}

// 提交表单
const handleSubmit = () => {
  formRef.value.validate((valid) => {
    if (valid) {
      submitting.value = true
      
      setTimeout(() => {
        ElMessage.success(form.id ? '修改成功' : '新增成功')
        dialogVisible.value = false
        submitting.value = false
        loadData()
      }, 500)
    }
  })
}

// 关闭对话框
const handleDialogClose = () => {
  resetForm()
}

// 重置表单
const resetForm = () => {
  form.id = null
  form.code = ''
  form.name = ''
  form.type = 'main'
  form.status = 'active'
  form.manager = ''
  form.phone = ''
  form.address = ''
  form.capacity = null
  form.warningThreshold = 80
  form.remark = ''
  formRef.value?.clearValidate()
}

// 初始化
onMounted(() => {
  loadData()
})
</script>

<style scoped>
.warehouses-page {
  padding: 0;
}

.search-card {
  margin-bottom: 16px;
}

.search-form {
  margin-bottom: -18px;
}

/* 统计卡片 */
.stats-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 16px;
}

.stat-card {
  cursor: pointer;
  transition: all 0.3s;
}

.stat-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.stat-content {
  display: flex;
  align-items: center;
}

.stat-icon {
  width: 60px;
  height: 60px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 16px;
  font-size: 28px;
  color: white;
}

.stat-info {
  flex: 1;
}

.stat-value {
  font-size: 28px;
  font-weight: bold;
  color: #303133;
  line-height: 1.2;
}

.stat-label {
  font-size: 14px;
  color: #909399;
  margin-top: 4px;
}

/* 卡片头部 */
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* 分页 */
.pagination {
  margin-top: 16px;
  justify-content: flex-end;
}

/* 详情页面 */
.warehouse-detail {
  padding: 0;
}

.stock-stats {
  margin-top: 16px;
}

.stat-item {
  text-align: center;
  padding: 20px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 8px;
  color: white;
}

.stat-item .label {
  font-size: 14px;
  opacity: 0.9;
  margin-bottom: 8px;
}

.stat-item .value {
  font-size: 24px;
  font-weight: bold;
}

/* 响应式 */
@media (max-width: 1200px) {
  .stats-cards {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .stats-cards {
    grid-template-columns: 1fr;
  }
}
</style>
